<template>
<div class="container">
<!--	登录盒子 type为login -->
	<div class="login__box" v-if="inputType === 'login'" >
		<div>
		<el-input
				placeholder="用户名"
				prefix-icon="el-icon-user"
				v-model="loginInfo.userName"
				@blur="errshow(1)"
				@focus="tipshow(1)"
		>
		</el-input>
			<span class="tip" v-if="!errShow.login.userName"></span>
			<span class="err" v-if="errShow.login.userName">{{errMessage.login.userName}}</span>
		</div>
		<div>
		<el-input
				placeholder="密码"
				prefix-icon="el-icon-lock"
				type="password"
				v-model="loginInfo.password"
				@focus="tipshow(2)"
				@blur="errshow(2)"
				clearable>
		</el-input>
			<span class="tip" v-if="!errShow.login.password"></span>
			<span class="err" v-if="errShow.login.password">{{errMessage.login.password}}</span>
		</div>
		<button class="confirm__button"> 确认登录</button>
	</div>
	
<!--	修改密码盒子 type为changPsd-->
	<div class="changPsd__box" v-if="inputType === 'changePsd'">
		<div>
			<el-input
					placeholder="原密码"
					prefix-icon="el-icon-time"
					type="password"
					v-model="changePsd.oriPsd"
					@blur="errshow(3)"
					@focus="tipshow(3)"
					clearable>
			</el-input>
			<span class="tip" v-if="!errShow.changePsd.oriPsd"></span>
			<span class="err" v-if="errShow.changePsd.oriPsd">{{errMessage.changePsd.oriPsd}}</span>
		</div>

		<div>
			<el-input
					placeholder="密码"
					prefix-icon="el-icon-lock"
					v-model="changePsd.nowPsd"
					type="password"
					@blur="errshow(4)"
					@focus="tipshow(4)"
					clearable>
			</el-input>
			<span class="tip" v-if="!errShow.changePsd.nowPsd">密码要求长度为8-16位，包含数字和字母</span>
			<span class="err" v-if="errShow.changePsd.nowPsd">{{errMessage.changePsd.nowPsd}}</span>
		</div>
		<div>
			<el-input
					placeholder="确认密码"
					prefix-icon="el-icon-lock"
					v-model="changePsd.confirmPsd"
					type="password"
					@blur="errshow(5)"
					@focus="tipshow(5)"
					clearable>
			</el-input>
			<span class="tip" v-if="!errShow.changePsd.confirmPsd">密码要求长度为8-16位，包含数字和字母</span>
			<span class="err" v-if="errShow.changePsd.confirmPsd">{{errMessage.changePsd.confirmPsd}}</span>
		</div>
		<button class="confirm__button"> 确认修改</button>
		<button class="return__button" @click="()=>{this.$router.go(-1)}">返回页面</button>
	</div>
</div>
</template>

<script>
import Utils  from '../../utils/utils'
export default {
	name: "LoginInput",
	props:{
		inputType:{
			type:String,
			default:'login'
		}
	},
	mounted() {

	},
	data(){
		return{
			loginInfo:{
				userName:'',
				password:''
			},
			changePsd:{
				oriPsd:'',
				nowPsd:'',
				confirmPsd:'',
			},
			errMessage:{
				login:{
					userName: '',
					password: ''
				},
				changePsd:{
					oriPsd:'',
					nowPsd:'',
					confirmPsd:'',
				}
			},
			errShow:{
				login:{
					userName: false,
					password: false
				},
				changePsd:{
					oriPsd:false,
					nowPsd:false,
					confirmPsd:false,
				}
			}
		}
	},

	methods:{
		errshow(number){
			switch (number){
			case 1:{
				this.errShow.login.userName = true;
				this.errMessage.login.userName=Utils.checkUserName(this.loginInfo.userName);
				break;
			}
			case 2:{
				this.errShow.login.password = true;
				this.errMessage.login.password=Utils.checkPassword(this.loginInfo.password);
				break;
			}
			case 3:{
				this.errShow.changePsd.oriPsd = true;
				this.errMessage.changePsd.oriPsd=Utils.checkPassword(this.changePsd.oriPsd);
				break;
			}
			case 4:{
				this.errShow.changePsd.nowPsd = true;
				this.errMessage.changePsd.nowPsd=Utils.checkPassword(this.changePsd.nowPsd);
				break;
			}
			case 5:{
				this.errShow.changePsd.congfirmPsd = true;
				this.errMessage.changePsd.confirmPsd=Utils.checkPassword(this.changePsd.confirmPsd);
				break;
			}
			
			}

		},
		tipshow(number){
			switch (number){
				case 1 :
					this.errShow.login.userName = false;
					break;
				case 2 :
					this.errShow.login.password = false;
					break;
				case 3 :
					this.errShow.changePsd.oriPsd = false;
					break;
				case 4 :
					this.errShow.changePsd.nowPsd = false;
					break;
				case 5 :
					this.errShow.changePsd.confirmPsd = false;
					break;
			}

		}
	}
}
</script>

<style lang="scss" scoped>
 .container{
	 width: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 .login__box{
		 width: 72%;
		 height: 180px;
		 display: flex;
		 flex-direction: column;
		 justify-content: space-between;
	 }
	 .changPsd__box{
		 width: 72%;
		 height: 320px;
		 display: flex;
		 flex-direction: column;
		 justify-content: space-between;
		 
 }
	 .confirm__button,.return__button{
		 width: 100%;
		 height: 45px;
		 border-radius: 5px;
		 color: #f7faff;
		 font-size: 15px;
		 cursor: pointer;
	 }
	 .confirm__button{
		 background-color: #0096ff;
		
	 }
	 .return__button{
		 background-color: #f04e60;
	 }
	 span{
		 font-size: 2px;
		 padding-left: 5px;
	 }
	 .err{
		 color: #f56c6c;
	 }
	 .tip{
		 color: #9d93a5;
	 }
 }
</style>